<template>
    <div>
        <div class="n-layout-page-header">
            <n-card :bordered="false" title="配置管理"></n-card>
        </div>
        <n-card :bordered="false" class="mt-4 proCard">
            <n-spin :show="spinShow">
                <n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8">
                    <n-grid-item v-for="item in configList" :key="item.id">
                        <n-card :title="item.configExplain" size="small">
                            <template #header-extra>
                                <n-button size="small" type="primary" @click="updateModel(item)">更新</n-button>
                            </template>
                            <div>{{ item.configValue }}</div>
                            <div v-if="isUpdate && updateKey === item.configCode" class="moss-ops-show">
                                <n-input type="password" showPasswordOn="click" maxlength="150" show-count
                                    placeholder="请输入默认密码" v-model:value="currentConfig.configValue" />
                                <div class="moss-ops-show">
                                    <n-space>
                                        <n-button size="small" @click="handleCloseModel()">取消</n-button>
                                        <n-button size="small" :loading="submitLoading" type="primary"
                                            @click="handleSubmit()">确认</n-button>
                                    </n-space>
                                </div>
                            </div>
                        </n-card>
                    </n-grid-item>
                </n-grid>
            </n-spin>
        </n-card>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref, h, onMounted } from 'vue';
import { useMessage, useDialog, type FormRules } from 'naive-ui';
import { tenantConfList, updateConfig } from '@/api/system/tenant';
import { encrypt, decrypt } from '@/utils/CryptoUtil';
import { ResultEnum } from '@/enums/httpEnum';
const message = useMessage();
const configList = ref<any[]>([]);
const isUpdate = ref(false);
const updateKey = ref('');
const currentConfig: any = ref({});
const submitLoading = ref(false);
const spinShow = ref(false);

/**
 * 加载数据
 */
const loadTenantConfList = async () => {
    spinShow.value = true;
    const res = await tenantConfList();
    configList.value = res;
    spinShow.value = false;
}
/**
 * 更新那个卡片内容
 * @param key 卡片key
 */
const updateModel = (current: any) => {
    isUpdate.value = true;
    updateKey.value = current.configCode;
    current.configValue = decrypt(current.configValue);
    currentConfig.value = current;
}
/**
 * 关闭
 */
const handleCloseModel = () => {
    isUpdate.value = false;
    loadTenantConfList();
}

/**
 * 关闭
 */
const handleSubmit = async () => {
    submitLoading.value = true;
    const data = await updateConfig({ id: currentConfig.value.id, configValue: encrypt(currentConfig.value.configValue) });
    if (data.code !== ResultEnum.SUCCESS) {
        const resultMsg = data.data ? data.data : '';
        message.error(data.mesg + '-' + resultMsg);
    }
    if (data.code === ResultEnum.SUCCESS) {
        message.success(data.mesg);
        isUpdate.value = false;
        loadTenantConfList();
        submitLoading.value = false;
    }
}

onMounted(() => {
    loadTenantConfList();
})
</script>
  
<style lang="less" scoped></style>
  